// web/src/app/learn/(course)/courses/[courseId]/_components/course-mobile-sidebar.tsx
import {Menu} from 'lucide-react'
import {Chapter, Course, UserProgress} from '@prisma/client'
import React from 'react';
import {
    Sheet,
    SheetContent,
    SheetTrigger
} from "@/components/ui/sheet";
import CourseSidebar from '@/app/learn/(course)/courses/[courseId]/_components/course-sidebar'

interface Props {
    course: Course & {
        chapters: (Chapter & {
            userProgress: UserProgress[] | null
        })[]
    }
    progressCount: number
}

const CourseMobileSidebar = ({course, progressCount}: Props) => {
    return (
        <Sheet>
            <SheetTrigger className={`md:hidden pr-4 hover:opacity-75 transition`}>
                <Menu/>
            </SheetTrigger>
            <SheetContent className={`p-0 bg-white w-72`} side={'left'}>
                {/*@ts-ignore*/}
                <CourseSidebar course={course} progressCount={progressCount}/>
            </SheetContent>
        </Sheet>
    );
};

export default CourseMobileSidebar;